<template>

  <div class="app-container">
    <div>
      <!-- 流程设计器 -->
      <my-process-designer
        :key="`designer-${reloadIndex}`"
        ref="processDesigner"
        v-model="xmlString"
        v-bind="controlForm"
        keyboard
        @init-finished="initModeler"
        @save="save"
      />

      <!-- 流程属性 -->
      <my-properties-panel
        v-show="proPanelVisible"
        :key="`penal-${reloadIndex}`"
        :bpmn-modeler="modeler"
        :prefix="controlForm.prefix"
        class="process-panel"
      />
    </div>
    <div class="panel-ctrl-bar">
      <div class="open-model-button" @click="proPanelVisible = !proPanelVisible"><i class="el-icon-paperclip" /></div>
    </div>
  </div>

</template>

<script>
import CustomContentPadProvider from '@/components/BpmnDesigner/package/designer/plugins/content-pad'
import CustomPaletteProvider from '@/components/BpmnDesigner/package/designer/plugins/palette'
import { getModel, addModel, updateModel } from '@/api/process'

export default {
  name: 'App',
  data() {
    return {
      isAdd: true,
      xmlString: '', // BPMN XML
      modeler: null,
      reloadIndex: 0,
      controlDrawerVisible: false,
      proPanelVisible: true,
      processDef: null,
      controlForm: {
        processId: '', // 初始化为空，自动生成
        processName: '',
        simulation: true,
        labelEditing: false,
        labelVisible: false,
        prefix: 'activiti',
        headerButtonSize: 'mini',
        additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
      },
      addis: {
        CustomContentPadProvider,
        CustomPaletteProvider
      },
      // 流程模型的信息
      model: {}
    }
  },
  created() {
    // 如果 defId 非空，说明是修改流程模型
    const defId = this.$route.query && this.$route.query.id
    if (defId) {
      this.isAdd = false
      getModel(defId).then(data => {
        this.xmlString = data.bpmnXml
        // console.log('xxxxxxxxxx:' + this.xmlString)
        this.processDef = data
        this.processDef.bpmnXml = null
        this.reloadProcessDesigner()
      })
    } else {
      this.isAdd = true
      this.controlForm.processId = this.$route.query && decodeURIComponent(this.$route.query.key)
      this.controlForm.processName = this.$route.query && decodeURIComponent(this.$route.query.name)
      this.reloadProcessDesigner()
    }
  },
  methods: {
    initModeler(modeler) {
      setTimeout(() => {
        this.modeler = modeler
        console.log(modeler)
      }, 10)
    },
    reloadProcessDesigner(deep) {
      this.controlForm.additionalModel = []
      for (const key in this.addis) {
        if (this.addis[key]) {
          this.controlForm.additionalModel.push(this.addis[key])
        }
      }
      deep && (this.xmlString = undefined)
      this.reloadIndex += 1
      this.modeler = null // 避免 panel 异常
    },
    save(bpmnXml) {
      if (this.isAdd) {
        const data = {}
        data.bpmnXml = bpmnXml // 新bpmnXml
        this.$confirm('此操作将保存并发布新流程，请谨慎操作?', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          addModel(data).then(response => {
            this.$notify({
              title: '保存新流程并发布成功',
              type: 'success',
              duration: 2500
            })
            // 跳转回去
            this.close()
          }).catch(err => {
            this.$message.error('保存新流程失败！！！' + err.message)
          })
        })
      } else {
        const data = {}
        data.id = this.processDef.id
        data.bpmnXml = bpmnXml // 新bpmnXml
        this.$confirm('此操作将修改并发布流程，请谨慎操作?', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateModel(data).then(response => {
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 2500
            })
            // 跳转回去
            this.close()
          }).catch(err => {
            this.$message.error('修改并发布流程失败！！！' + err.message)
          })
        })
      }
    },
    close() {
      // close tagView
      const view = { 'path': this.$route.path, 'name': this.$route.name }
      this.$store.dispatch('tagsView/delView', view)
      return this.$router.push({ path: '/sys/process' })
    }
  }
}
</script>

<style lang="scss">
.control-form {
  .el-radio {
    width: 100%;
    line-height: 32px;
  }
}
.element-overlays {
  box-sizing: border-box;
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  color: #fafafa;
}

.my-process-designer {
  height: calc(100vh - 100px);
  min-height: 600px;
}
.process-panel__container {
  position: absolute;
  right: 0;
  top: 55px;
  height: calc(100vh - 100px);
   min-height: 600px;
}

.panel-ctrl-bar {
  position: fixed;
  right: 8px;
  bottom: 10px;
  z-index: 10;
}

.open-model-button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  font-size: 32px;
  background: rgba(64, 158, 255, 1);
  color: #ffffff;
  cursor: pointer;
}

</style>
